<template>
  <el-dialog
    title="物品过滤"
    :visible="visible"
    width="320px"
    top="10vh"
    :modal="false"
    @close="handleClose">
    <div class="filter-content">
      <!-- 搜索框 -->
      <div class="search-box">
        <el-input
          v-model="searchText"
          placeholder="搜索物品名称..."
          size="small"
          clearable
        />
      </div>
      
      <div class="filter-list">
        <!-- 已隐藏的物品 -->
        <div 
          v-for="item in hiddenItems" 
          :key="item.id"
          class="filter-item filtered"
          :class="{ 'filtered': true }">
          <span class="filter-item-name">{{ item.name }}</span>
          <el-checkbox 
            v-model="checkedIds" 
            :label="item.id"
            @change="handleChange">
            隐藏
          </el-checkbox>
        </div>
        
        <!-- 未隐藏的物品 -->
        <div 
          v-for="item in visibleItems" 
          :key="item.id"
          class="filter-item"
          :class="{ 'filtered': false }">
          <span class="filter-item-name">{{ item.name }}</span>
          <el-checkbox 
            v-model="checkedIds" 
            :label="item.id"
            @change="handleChange">
            隐藏
          </el-checkbox>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: {
    visible: Boolean,
    itemList: Array,
    filteredIds: Array
  },
  data() {
    return {
      checkedIds: [...this.filteredIds],
      searchText: ''
    }
  },
  computed: {
    // 根据搜索条件过滤的列表
    filteredList() {
      if (!this.searchText) {
        return this.itemList || []
      }
      const searchLower = this.searchText.toLowerCase()
      return (this.itemList || []).filter(item => 
        item.name && item.name.toLowerCase().includes(searchLower)
      )
    },
    
    // 已隐藏的物品（放在上面）
    hiddenItems() {
      return this.filteredList.filter(item => 
        this.checkedIds.includes(item.id)
      )
    },
    
    // 未隐藏的物品（放在下面）
    visibleItems() {
      return this.filteredList.filter(item => 
        !this.checkedIds.includes(item.id)
      )
    }
  },
  watch: {
    filteredIds(newVal) {
      this.checkedIds = [...newVal]
    }
  },
  methods: {
    handleClose() {
      // 不直接修改 this.visible，而是通过事件通知父组件
      this.$emit('update:visible', false);  // 触发自定义事件
    },
    handleChange() {
      this.$emit('update-filter', [...this.checkedIds])
    }
  }
}
</script>

<style scoped>
.filter-content {
  max-height: 300px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.filter-content::-webkit-scrollbar {
  display: none;
}

.search-box {
  margin-bottom: 10px;
}

.filter-list {
  padding: 5px 0;
}

.filter-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  margin-bottom: 6px;
  background: #f8f9fa;
  border-radius: 6px;
  border-left: 3px solid #409EFF;
  transition: all 0.3s ease;
}

.filter-item:hover {
  background: #e9ecef;
}

.filter-item.filtered {
  opacity: 0.6;
  background: #e9ecef;
  border-left-color: #dcdfe6;
}

.filter-item-name {
  font-weight: 500;
  color: #333;
  font-size: 12px;
  flex: 1;
}
</style>